﻿@model DiarySocial.ViewModels.HomeWithTimeLineVM
@{
    ViewBag.Title = "Home";
    int userId = WebSecurity.GetUserId(User.Identity.Name);
}
<section class="hbox stretch">
    <section class="vbox">
        <section class="scrollable wrapper">
            <!-- Timeline -->
            <div class="timeline comment-list">
                <!-- Editer for post new diary -->
                <article class="timeline-item alt" id="post-new-diary-cotainer">
                    <div class="timeline-caption">
                        <section class="panel panel-default">
                            <div>
                                <span class="arrow right"></span>
                                <span class="timeline-icon"><i class="fa fa-plus time-icon bg-primary"></i></span>
                                <span class="timeline-date">
                                    <i class="fa fa-clock-o"></i>
                                    now
                                </span>
                            </div>
                            <form action="/Diary/QuickPost" data-tientq-ajax="true" data-tientq-ajax-method="post" data-tientq-ajax-mode="after" data-tientq-ajax-update="#post-new-diary-cotainer" id="form-post-diary" method="post">
                                @Html.AntiForgeryToken()
                                @Html.TextAreaFor(m => m.Body, new { @class = "form-control no-border", @rows = "3", @placeholder = "What did you do..."})
                                @*<textarea name="Body" class="" rows="3" placeholder="What did you do..."></textarea>*@
                                <footer class="panel-footer bg-light lter">
                                    <button class="btn btn-info pull-right btn-sm" type="submit">POST</button>
                                    <div class="btn-group m-r pull-right">
                                        <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle">
                                            <span class="dropdown-label">Friend</span>
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-select">
                                            <li class="">
                                                <a href="#">
                                                    <i class="fa fa-globe"></i>
                                                    <input type="radio" name="d-s-r">Public
                                                </a>
                                            </li>
                                            <li class="">
                                                <a href="#">
                                                    <i class="fa fa-lock"></i>
                                                    <input type="radio" name="d-s-r">Private
                                                </a>
                                            </li>
                                            <li class="active">
                                                <a href="#">
                                                    <i class="fa fa-user"></i>
                                                    <input type="radio" name="d-s-r" checked="">Friend
                                                </a>
                                            </li>
                                            <li class="disabled">
                                                <a href="#">
                                                    <i class="fa fa-envelope-o"></i>
                                                    <input type="radio" name="d-s-r" disabled>Invite
                                                </a>
                                            </li>
                                            <li class="disabled">
                                                <a href="#">
                                                    <i class="fa fa-bullhorn"></i>
                                                    <input type="radio" name="d-s-r" disabled>Anonymous
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <ul class="nav nav-pills nav-sm">
                                        <li class="disabled"><a href="#"><i class="fa fa-camera text-muted"></i></a></li>
                                        <li class="disabled"><a href="#"><i class="fa fa-video-camera text-muted"></i></a></li>
                                    </ul>
                                </footer>
                            </form>
                        </section>
                    </div>
                </article>
                <!-- / Editer for post new diary -->
                <div id="ajax-target"></div>
                <!-- Post 1 -->
                @{
                    int i = 0;
                    var arrowClass = "left";
                    var timelineClass = "";
                    var likeClass = "";
                }
                @foreach (var m in Model.Diaries)
                {
                    if (i % 2 == 0)
                    {
                        // right
                        arrowClass = "left";
                        timelineClass = "";
                    }
                    else
                    {
                        // left
                        arrowClass = "right";
                        timelineClass = "alt";
                    }
                    if (m.LikedUsers.FirstOrDefault(u => u.UserId == userId) != null)
                    {
                        likeClass = "active";
                    }
                    else
                    {
                        likeClass = "";
                    }
                    i++;
                    <article id="post-id-@m.DiaryId" class="timeline-item @timelineClass">
                        <div class="timeline-caption">
                            <section class="comment-body panel panel-default">
                                <header class="panel-heading bg-white">
                                    <a href="#">@m.Author.UserName</a>
                                    <span class="text-muted m-l-sm pull-right">
                                        <i class="fa fa-angle-down"></i>
                                    </span>
                                </header>
                                <div class="panel-body">
                                    <span class="arrow @arrowClass"></span>
                                    <span class="timeline-icon">
                                        <a href="#" class="thumb-sm avatar">
                                            <img src="~/Images/avatar.png" class="img-circle">
                                        </a>
                                    </span>
                                    <span class="timeline-date">
                                        <i class="fa fa-clock-o"></i>
                                        @MyHelpers.DisplayTime(m.Created)
                                    </span>
                                    <div class="more">
                                        <div class="more-content">
                                            @m.Body
                                        </div>
                                    </div>
                                    <div class="comment-action m-t- ">
                                        <a href="#" data-toggle="class" class="btn btn-default btn-xs btn-like @likeClass" id="like-id-@m.DiaryId" data-post-id="@m.DiaryId">
                                            <i class="fa fa-star-o text-muted text"></i>
                                            <i class="fa fa-star text-danger text-active"></i>
                                            Like
                                        </a>
                                        <a href="@Url.Action("Comment", "Diary", new { id = m.DiaryId})" data-toggle="ajaxModal" class="btn btn-default btn-xs">
                                            <i class="fa fa-mail-reply text-muted"></i> Reply
                                        </a>
                                        <div class="small text-muted inline">
                                            @if (m.LikedUsers.Count > 0)
                                            {
                                                @m.LikedUsers.Count @: likes
                                            }
                                            @if (m.Comments.Count > 0)
                                            {
                                                @:<a href="@Url.Action("Comment", "Diary", new { id = m.DiaryId})" data-toggle="ajaxModal">
                                                @m.Comments.Count @: comments
                                                @:</a>
                                            }
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </article>
                    for (int ic = 0; ic < m.Comments.Count; ic++)
                    {
                        if (ic < (m.Comments.Count - 2))
                        {
                            continue;
                        }
                        var c = m.Comments.ElementAt(ic);
                        <article id="comment-id-@c.CommentId" class="timeline-item comment-item comment-reply @timelineClass">
                            <div class="timeline-caption">
                                <a class="pull-left thumb-sm avatar">
                                    <img src="~/Images/avatar.png">
                                </a>
                                <section class="comment-body panel panel-default text-sm">
                                    <div class="panel-body more">
                                        <div class="more-content">
                                            <span class="text-muted m-l-sm pull-right">
                                                <i class="fa fa-clock-o"></i>
                                                @MyHelpers.DisplayTime(c.Created)
                                            </span>
                                            <a href="#">@c.Author.UserName</a>
                                            <span>: </span>
                                            @c.Text
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </article>
                    }
                }
                <div class="timeline-footer">
                    <div class="wrapper">

                    </div>
                </div>
            </div>
        </section>
    </section>
</section>
@section scripts {
    <script type="text/javascript">
        $(document).ready(function() {
            $('.btn-like').click(function(event) {
                var $btn = $(this);
                var post_id = $btn.attr('data-post-id');
                var is_like = true;
                if ($btn.hasClass('active')) {
                    is_like = false;
                }
                var options = {
                    url: "@Url.Action("Like", "Diary")",
                    type: "post",
                    data: {
                        id: post_id,
                        isLike: is_like
                    }
                };
                $.ajax(options).done(function(data) {
                    if (!data.success) {
                        if (data.like) {
                            $btn.removeClass('active');
                        } else {
                            $btn.addClass('active');
                        }
                    }
                });
            });
        });
    </script>
}